<template>
    <el-button @click="addAlarmlist" type="primary">添加规则</el-button>

    <el-table :data="alarmInfo.records" style="width: 100%" :header-cell-style = "{'text-align':'center'}"
    :cell-style = "{'text-align':'center'}"
    >
        <el-table-column prop="name" label="报警名称" width="180" />
        <el-table-column prop="chnnelIndex" label="通道号" width="180" />
        <el-table-column prop="alarmvalue" label="报警值" width="180" />
        <el-table-column label="报警类型" align="center" width="100">
            <template #default="props">
                <template v-if="props.row.alarmType == 0">低于报警值</template>
                <template v-if="props.row.alarmType == 1">高于报警值</template>
            </template>
        </el-table-column>
        <el-table-column align="center"  label="操作" header-align="center">
            <template #default="props">
                <el-button @click="handleEdit(props.row)" type="primary">编辑</el-button >
                <el-button @click="handleDelel(props.row)" type="danger">删除</el-button >
            </template>
        </el-table-column>
    </el-table>


    <public-dialog v-model="showDia" :title="showtitle" @confirmDialog="doSubmit">
    <el-form
      ref="diaFormRef"
      :model="diaForm"
      :rules="diaRules"
      label-width="auto"
      label-position="top"
      class="csin-form"
    >
      <el-form-item label="规则名称：" prop="name">
        <el-input
          v-model="diaForm.name"
          clearable
          maxlength="100"
          style="width: 100%"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="通道号：" prop="chnnelIndex">
        <el-input type="number"
          v-model="diaForm.chnnelIndex"
          clearable
          maxlength="30"
          style="width: 100%"
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="报警值：" prop="alarmvalue">
        <el-input type="number"
          v-model="diaForm.alarmvalue"
          clearable
          maxlength="30"
          style="width: 100%"
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="报警类型：" prop="alarmType">
        <el-select
          v-model="diaForm.alarmType"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item>
     
    </el-form>
  </public-dialog>

</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import imgLoader from "@/assets/images/nodata.png";

let { proxy } = getCurrentInstance();
const props = defineProps({
  devinfo: {
    type: Object,
    default: () => {},
  },
});
const options = ref([
  { value: 0, label: "低于报警值" },
  { value: 1, label: "高于报警值" },
]);

const diaRules = ref({
  name: [{ required: true, message: "请输入规则名称", trigger: "blur" }],
  chnnelIndex: [{ required: true, message: "请输入通道号", trigger: "blur" }],
  alarmvalue: [
    { required: true, message: "请输入报警值", trigger: "blur" },
  ],
  alarmType: [{ required: true, message: "请选择报警类型", trigger: "blur" }],
});
const diaForm = ref({});
const showDia = ref(false);
const showtitle = ref({});
const setInfo = ref({});
const diaFormRef = ref(null);
const alarmInfo = ref({});

const addAlarmlist = () => {
   diaForm.value = { ...setInfo.value };
   showDia.value = true;
   diaForm.value.id = 0;
   showtitle.value = "添加规则"
}


const getData = () => {
  proxy
    ._http({
      url: "/api/equipment/alarmPage",
      type: "post",
      isBody: true,
      isLoading: true,
      data: {
        DeviceId: props.devinfo.id,
      },
    })
    .then((res) => {
        if(res.total == 0)
            alarmInfo.value.records = [];
        else
            alarmInfo.value = res;
      console.log("报警列表数据",alarmInfo);
    })
    .catch((err) => {

    });
};
const handleEdit = (row) => {
  console.log("编辑",row);
  diaForm.value   = { ...row };
  showDia.value = true;
  showtitle.value = "编辑规则"
}
const handleDelel = (row) =>{
  console.log("删除",row);
   ElMessageBox.confirm(
          "删除后系统无法恢复，确认删除吗?",
          "信息提示",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            customClass: "public-message-box-default",
          }
        ).then(() => {
          //删除逻辑

          proxy
            ._http({
              url: "/api/equipment/deleteAlarm",
              type: "post",
              isBody: true,
              isLoading: true,
              data: {
                id:row.id
              },
            })
            .then((res) => {
              ElMessage.success("删除成功");
              getData();
              
             
            })
            .catch((err) => {});
        });
}
const doSubmit = (type) => {
  if (type === "cancel") {
    diaForm.value = {};
    diaFormRef.value.resetFields();
    showDia.value = false;
    return;
  }
  diaFormRef.value.validate((valid) => {
    if (valid) {
        
        diaForm.value.chnnelIndex = Number(diaForm.value.chnnelIndex);
        diaForm.value.alarmType = Number(diaForm.value.alarmType);
        diaForm.value.DeviceId = props.devinfo.id;

        if(diaForm.value.id == 0)
        {
          console.log("添加报警",diaForm)
            proxy
            ._http({
              url: "/api/equipment/addAlarm",
              type: "post",
              isBody: true,
              isLoading: true,
              data: {
                ...diaForm.value,
              },
            })
            .then((res) => {
              ElMessage.success("添加成功");
              diaForm.value = {};
              diaFormRef.value.resetFields();
              showDia.value = false;
              getData();
            })
            .catch((err) => {});
        }else
        {
          console.log("修改报警",diaForm)  
          proxy
            ._http({
              url: "/api/equipment/EditAlarm",
              type: "post",
              isBody: true,
              isLoading: true,
              data: {
                ...diaForm.value,
              },
            })
            .then((res) => {
              ElMessage.success("修改成功");
              diaForm.value = {};
              diaFormRef.value.resetFields();
              showDia.value = false;
              getData();
            })
            .catch((err) => {});
        }


        
        
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};

onMounted(() => {
    console.log("报警列表",props.devinfo);
    getData();
});
</script>
<style lang="scss">
.dataInTime {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  &-item {
    display: flex;
    padding: 28px 0;
    margin-bottom: 18px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 23%;
    background-color: #f2f9ff;
    border-radius: 4px;
    &-data {
      font-size: 32px;
      color: #555555;
      font-weight: bold;
      margin-bottom: 18px;
    }
    &-title {
      color: #999;
      font-size: 14px;
    }
  }
}
</style>
